<template>
	<view>
		<view class="content margin30">
			<view class="flex-s">
				<view class="ordernavmain">
					<view class="ordereach" :class="activenav == 0 ? 'activenav':''" @click="navclick(0)">全部</view>
					<view class="ordereach" :class="activenav == 1 ? 'activenav':''" @click="navclick(1)">今天</view>
					<view class="ordereach" :class="activenav == 2 ? 'activenav':''" @click="navclick(2)">近7天</view>
					<view class="ordereach" :class="activenav == 3 ? 'activenav':''" @click="navclick(3)">近15天</view>
					<view class="ordereach" :class="activenav == 4 ? 'activenav':''" @click="navclick(4)">近30天</view>
				</view>
			</view>
		</view>
			<view class="user-withdraw-code">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption"
					@down="downCallback">
					<view class="order-list">
						<view class="row flex-start margin30" v-for="(item,index) in list" :key="index"
						@click="apifun.navigate('/bundle/pages/lhdetail','id='+item.id+'&time='+activenav)">
							<image class="rankimg" v-if="index == 0" src="/bundle/static/image/1@2x.png" mode=""></image>
							<image class="rankimg" v-if="index == 1" src="/bundle/static/image/2@2x.png" mode=""></image>
							<image class="rankimg" v-if="index == 2" src="/bundle/static/image/3@2x.png" mode=""></image>	
							<view class="sell" v-if="index !== 0 && index !== 1 && index !== 2" >{{index+1}}</view>
							<image class="headshot" :src="item.avatar" mode=""></image>
							<view class="name">{{item.nickname}}</view>
							<view class="money">{{item.amount}}元 / {{item.order_count}}单</view>
						</view>
					</view>
				</mescroll-body>
			</view>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapGetters } from "vuex";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		ShopRanklist,
	} from "@/api/user"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: '/static/image/order_null.png',
						tip: '暂无记录', // 提示
					}
				},
				list: [], // 列表数据--全部
				activenav1: 1,
				activenav: 0,
			}
		},
		onLoad() {

		},
		computed: {
		    ...mapGetters(["userInfo", "appConfig"]),
		},
		methods: {
			// getdetail(option){
			// 	if(option.level == 1){
			// 		this.apifun.navigate('/pages/mine/customerManage','id='+option.id)
			// 	}
			// 	if(option.level == 2){
			// 		this.apifun.navigate('/bundle_b/pages/level-three','user_id='+option.id)
			// 	}
			// 	if(option.level == 3){
			// 		this.apifun.navigate('/pages/mine/customerManage','id='+option.id)
			// 	}
			// },
			upCallback(page) {
				console.log('page',page)
				const pageNum = page.num; // 页码, 默认从1开始
				const pageSize = page.size; // 页长, 默认每页10条
					ShopRanklist({
						time_type: this.activenav,
					}).then(({
						data
					}) => {
						if (page.num == 1) this.list = [];
						const curPageData = data;
						const curPageLen = curPageData.length;
						const hasNext = !!data.more;
						this.list = this.list.concat(curPageData); 
						this.mescroll.endSuccess(curPageLen, hasNext);
					}).catch(() => {
						this.mescroll.endErr()
					})
			},
			navclick(type) { //切换状态
			// this.downCallback()
				let that = this;
				that.activenav = type;
				that.downCallback() 
			},
		}
	}
</script>

<style>
	page{
		background-color: #efefef;
		padding-bottom: 40rpx;
	}
	.row:nth-of-type(1){
		margin-top: 36rpx;
	}
	.row{
		background-color: #fff;
		padding: 26rpx 20rpx;
		margin-top: 14rpx;
		border-radius: 14rpx;
	}
	.rankimg{
		width: 56rpx;
		height: 70rpx;
	}
	.headshot{
		width: 82rpx;
		height: 82rpx;
		border-radius: 50rpx;
		margin-left: 22rpx;
	}
	.name{
		font-size: 26rpx;
		width: 262rpx;
		/* background-color: #ee434b; */
		margin-left: 20rpx;
	}
	.money{
		font-size: 26rpx;
		margin-left: 10rpx;
		width: 200rpx;
		text-align: end;
		/* background-color: #efefef; */
	}
	.sell{
		color: #989898;
		font-size: 38rpx;
		width: 60rpx;
		text-align: center;
	}
	.null{
		margin-top: 500rpx;
		text-align: center;
	}
	page {
		background-color: #efefef;
		padding-bottom: 30rpx;
	}

	.content {
		background-color: #fff;
		border-radius: 12rpx;
		margin-top: 26rpx;
		padding: 26rpx;
	}

	.ordernavmain {
		/* width: 85%; */
		display: flex;
		justify-content: space-between;
	}
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 130rpx;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
	}

	.activenav {
		color: #fff;
		background-color: #ee434b;
	}

</style>
